<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__static/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="__static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="__static/css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
        .layui-progress-text{
            position: relative !important;
            top: -6px;
            line-height: 18px;
            font-size: 12px;
        }

    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">
            <div class="layui-card top-panel">
                <div class="layui-card-header" style="text-align: left;">个人任务进度
                	<span style="margin-top: 2%;" class="layui-badge layui-bg-blue  pull-right">月</span>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5" >
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="height: 60px;">
                            <div class="layui-progress layui-progress-big " lay-showpercent="true" style="margin-top: 3%;">
                                <div class="layui-progress-bar" lay-percent="{$gr_rw.lv}%" ></div>
                            </div>
                        </div>
                        <div class="layui-col-xs2 layui-col-md2 top-panel-tips">
                           	累计消耗 <br><a style="color: #1aa094">▲{$gr_rw.xh}</a>
                        </div>
                        <div class="layui-col-xs2 layui-col-md2 top-panel-tips">
                                任务 <br><a style="color: #1aa094">▲{$gr_rw.rw}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div class="layui-card top-panel">
                <div class="layui-card-header" style="text-align: left;">小组任务进度
                	<span style="margin-top: 2%;" class="layui-badge layui-bg-blue  pull-right">月</span>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="height: 60px;">
                            <div class="layui-progress layui-progress-big " lay-showpercent="true" style="margin-top: 3%;">
                                <div class="layui-progress-bar" lay-percent="{$xz_rw.lv}%" ></div>
                            </div>
                        </div>
                        <div class="layui-col-xs2 layui-col-md2 top-panel-tips">
                           	累计消耗 <br><a style="color: #1aa094">▲{$xz_rw.xh}</a>
                        </div>
                        <div class="layui-col-xs2 layui-col-md2 top-panel-tips">
                                任务 <br><a style="color: #1aa094">▲{$xz_rw.rw}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">要展示的指标名称</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            9,054,056
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>

    <div class="layui-row layui-col-space15 layui-form">
        <div class="layui-col-xs12 layui-col-md12">
        	<div class="layui-card-header " style="background-color:#ffffff;">
        		<div class="pull-right">
                    <div class="btn-group">
                        <div class="layui-inline">
                            <select  lay-filter="is_yunying">
                                <option value="0">全部</option>
                                <option value="1">自运营</option>
                                <option value="2">代运营</option>
                                <option value="3">纯代运营</option>
                            </select>
                        </div>
                        <div class="layui-btn-group">
						  <button type="button" class="layui-btn layui-btn-sm layui-btn-primary month" > 月 </button>
						  <button type="button" class="layui-btn layui-btn-sm layui-btn-primary day"> 日 </button>
						</div>
                    </div>
                </div>
        	</div>
            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>    
       
    </div>

    <div class="layui-row layui-col-space15 layui-form">
        <div class="layui-col-xs6 layui-col-md6">
            <div class="layui-card-header " style="background-color:#ffffff;">
            	个人和小组消耗
        		<div class="pull-right">
                    <div class="btn-group">
                        <div class="layui-inline">
                            <select  lay-filter="is_yunying2">
                                <option value="0">全部运营类型</option>
                                <option value="1">自运营</option>
                                <option value="2">代运营</option>
                                <option value="3">纯代运营</option>
                            </select>
                        </div>
                   	 	<div class="layui-inline">
                    	 	<input type="text" class="layui-input" autocomplete="off" id="test1" placeholder="请选择日期">
                   	 	</div>
                        <div class="layui-btn-group">
                        	<button type="button" class="layui-btn layui-btn-sm layui-btn-primary " onclick="get_consume_top(3)"> 上月 </button>
						  	<button type="button" class="layui-btn layui-btn-sm layui-btn-primary " onclick="get_consume_top(2)"> 上周 </button>
						  	<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="get_consume_top(1)"> 昨日 </button>
						</div>
                    </div>
                </div>
        	</div>
            <div id="echarts-xiaohao" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">
            <div class="layui-card-header " style="background-color:#ffffff;">
                快手 月度账户前五消耗
        		<!-- <div class="pull-right">
                    <div class="btn-group">
                   	 	<div class="layui-inline">
                    	 	<input type="text" class="layui-input" autocomplete="off" id="test1" placeholder="请选择日期">
                   	 	</div>
                        <div class="layui-btn-group">
                        	<button type="button" class="layui-btn layui-btn-sm layui-btn-primary " onclick="get_consume_top(3)"> 上月 </button>
						  	<button type="button" class="layui-btn layui-btn-sm layui-btn-primary " onclick="get_consume_top(2)"> 上周 </button>
						  	<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="get_consume_top(1)"> 昨日 </button>
						</div>
                    </div>
                </div> -->
        	</div>
            <div id="echarts-dataset-ks" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div class="layui-card-header " style="background-color:#ffffff;">
                头条 月度账户前五消耗
        		<!-- <div class="pull-right">
                    <div class="btn-group">
                   	 	<div class="layui-inline">
                    	 	<input type="text" class="layui-input" autocomplete="off" id="test1" placeholder="请选择日期">
                   	 	</div>
                        <div class="layui-btn-group">
                        	<button type="button" class="layui-btn layui-btn-sm layui-btn-primary " onclick="get_consume_top(3)"> 上月 </button>
						  	<button type="button" class="layui-btn layui-btn-sm layui-btn-primary " onclick="get_consume_top(2)"> 上周 </button>
						  	<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="get_consume_top(1)"> 昨日 </button>
						</div>
                    </div>
                </div> -->
        	</div>
            <div id="echarts-dataset-tt" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
    </div>
    <!-- <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
    </div> -->


</div>
<!--</div>-->
<script src="__static/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="__static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    var $,layer,echarts,element,laydate,form,time2,yy_type
    layui.use(['form','layer', 'echarts','element','laydate'], function () {
        form = layui.form ,$ = layui.jquery, layer = layui.layer, echarts = layui.echarts,element = layui.element,laydate = layui.laydate;
        //日期范围
        laydate.render({
          elem: '#test1'
          ,range: '&'
       	  ,done: function(value, date, endDate){
                time2 = value;
       		 	get_consume_top(4,value,yy_type);
       		  }
        });
        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

        var optionRecords = {
            title: {
                //text: '指标名称-报表图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['消耗','平均值']
            },
            
            toolbox: {
                feature: {
                    saveAsImage: {show: true},
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
           
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '消耗',
                    type: 'line',
                    data: []
                } 
            ]
        };
        echartsRecords.setOption(optionRecords);
        $(".day").click(function(){
        	get_consume(3);
        	
        });
        $(".month").click(function(){
        	get_consume(2);
        });
        
        get_consume(3)
		function get_consume(tt,is_operate=0){
        	echartsRecords.showLoading();
        	$.post('{:url("get_consume_info")}?t=json',{time:tt,is_operate:is_operate},function(data){
        		echartsRecords.hideLoading();
        		echartsRecords.setOption({
        			title: {
                        text: data.data.text
                    },
        			 xAxis: [
   		                {
   		                    type: 'category',
  		                    boundaryGap: true,
   		                    data: data.data.x
                        }
                    ],
                   
    		        series: [
                        {
                            name: '平均值',
                            type: 'line',
                            color: 'red',
                            data: data.data.y1
                        },    
                        {
                            name: '消耗',
                            type: 'line',
                            areaStyle: {},
                            data: data.data.y
                        },
                      
                    ]
    		    });
        	});
        	
		}
        /**
         * 个人和小组消耗
         */
        echarts_consume_top = echarts.init(document.getElementById('echarts-xiaohao'), 'walden');
        option_consume_top = {
       		 	color: ['#3398DB'],
       		    tooltip: {
       		        trigger: 'axis',
       		        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
       		            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
       		        }
       		    },
       		    grid: {
       		        left: '3%',
       		        right: '4%',
       		        bottom: '3%',
       		        containLabel: true
       		    },
       		    xAxis: [
       		        {
       		            type: 'category',
       		            data: [],
       		            axisTick: {
       		                alignWithLabel: true
       		            }
   						
       		        }
       		    ],
       		    yAxis: [
       		        {
       		            type: 'value'
       		        }
       		    ],
       		    series: [
       		        {
                           type: 'bar',
                           barWidth: '60%',
       		            data: []
       		        }
       		    ]
        };

        echarts_consume_top.setOption(option_consume_top);
        get_consume_top(1);
       
      	


        /**
         * 柱状图
         */
        //快手前5消耗
        var echartsDatasetKS = echarts.init(document.getElementById('echarts-dataset-ks'), 'walden');
        var optionDataset = {
            legend: {},
            tooltip: {},
            grid: {
       		        left: '3%',
       		        right: '4%',
       		        bottom: '3%',  
                    containLabel: true
            },
            xAxis: [
       		        {
       		            type: 'category',
       		            axisTick: {
       		                alignWithLabel: true
       		            }
   						
       		        }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ]
            
           
        };
        echartsDatasetKS.setOption(optionDataset);
        //头条前5消耗
        var echartsDatasetTT = echarts.init(document.getElementById('echarts-dataset-tt'), 'walden');
        echartsDatasetTT.setOption(optionDataset);

        get_consumes(1);
        function get_consumes(tt,is_operate=0){
            echartsDatasetKS.showLoading();
            echartsDatasetTT.showLoading();
        	$.post('{:url("acc_ranking")}?t=json',{time:tt,is_operate:is_operate},function(data){
                echartsDatasetKS.hideLoading();
                echartsDatasetTT.hideLoading();
                // 快手数据
                var da = data.data.ks_list;
                echartsDatasetKS.setOption({
                    xAxis: {
                        type: 'category',
                        data: ['快手']
                    },
                    series: da
                });
                // 头条数据
                var da2 = data.data.tt_list;
                echartsDatasetTT.setOption({
                    xAxis: {
                        type: 'category',
                        data: ['头条']
                    },
                    series: da2
                });
        	});
        	
		}
        
        /**
         * 中国地图
         */
        // var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden');


        var optionMap = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                    ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                    ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            grid: {top: '55%'},
            series: [
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    label: {
                        formatter: '{b}: {@2012} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '2012',
                        tooltip: '2012'
                    }
                }
            ]
        };

        //echartsMap.setOption(optionMap);


        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }
        // 最近30天消耗，运营类型
        form.on('select(is_yunying)', function(data){
            get_consume(3,data.value);
        });
        // 个人和小组消耗 运营类型
        form.on('select(is_yunying2)', function(data){
            var t = time2?time2:0;
            yy_type = data.value;
        });
    });
     //个人和小组消耗数据
     function get_consume_top(type,times=0){
            echarts_consume_top.showLoading();
            $.post('{:url("consume_top")}?t=json',{type:type,times:times,is_operate:yy_type},function(data){
                echarts_consume_top.hideLoading();
                echarts_consume_top.setOption({
                    title: {
                        text: data.data.text
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: data.data.x,
                            boundaryGap: true
                        }
                    ],
                    series: [{
                        name: '消耗',
                        barWidth: '60%',
                        data: data.data.y
                    }]
                });
            });
        }
         
        
</script>
</body>
</html>
